<template>
  <md-nav-bar
    title="我的"
    color="white"
    hideLeft
    :bgInfo="{ url: 'https://cdn.xmxiaomai.com/isong_static/my/Oval.png' }" />
  <view class="userinfo">
    <!-- 个人信息 -->
    <view class="profile-section">
      <image class="avatar" :src="data.info?.avatar"></image>
      <view class="profile-info">
        <view class="name">{{ data.info?.nickname }}</view>
        <view class="vip-badge" @click="onToVip">{{ data.info.level?.name }}</view>
      </view>
      <view class="sign-section">
        <view :class="['sign-btn', { disabled: !!data.signInInfo?.todaySignIn }]" @click="onClockIn">
          {{ !!data.signInInfo?.todaySignIn ? '已签到' : '签到' }}
        </view>
        <view class="sign-hint">签到有礼</view>
      </view>

    </view>
    <!-- 会员卡 -->
    <view class="vip-card" @click="onToVip">
      <view class="vip-title">ISONG 专属会员</view>
      <view class="vip-desc">立享测评优惠和专属好礼</view>
      <button class="recharge-btn">立即充值</button>
    </view>
  </view>
  <view class="mine-page">
    <!-- 菜单列表 -->
    <view class="menu-list">
      <view class="menu-item" v-for="item in menuList" :key="item.text" @click="onToPage(item.url)" :class="{ emphasize:item.emphasize }">
        <image class="menu-icon" :src="item.icon"></image>
        <view class="menu-text">{{ item.text }}</view>
        <view v-if="item.extra" class="menu-extra">{{ item.extra }}</view>
        <uni-icons type="right" size="18" color="#ccc"></uni-icons>
      </view>
      <button open-type="contact" @contact="handleContact" class="menu-item cancel_button_default">
        <image class="menu-icon" src="https://cdn.xmxiaomai.com/isong_static/my/my10.png"></image>
        <view class="menu-text">联系客服</view>
        <uni-icons type="right" size="18" color="#ccc"></uni-icons>
      </button>
    </view>
    <!-- 退出登录 -->
    <view class="logout-btn" @click="handleLogout">退出登录</view>
    <bottom-tab-bar :current="4" />
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { onShow } from '@dcloudio/uni-app';
// 接口
import api from '@/api';
import type { User } from '@/api/data';
import { Toast, checkLoginAndNavigate } from '@/utils/util';

const data = reactive({
  // isClock: false,
  signInInfo: {} as User.GetSignInStatus.Data,
  info: {} as User.Get.Data,
});

const menuList = ref([
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my1.png', text: '个人信息', url: '/pages/sub/my/userInfo' },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my2.png', text: '我的作品', url: '/pages/evaluation/index',emphasize:true },
  {
    icon: 'https://cdn.xmxiaomai.com/isong_static/my/my3.png',
    text: '我的钱包',
    extra: '提现',
    url: '/pages/sub/my/myIncome',
  },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my4.png', text: 'A豆记录', url: '/pages/sub/my/aBeanRecord' },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my5.png', text: '我的订单', url: '/pages/sub/my/myOrder' },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my6.png', text: '我的小店', url: '/pages/sub/my/myShop' },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my7.png', text: '推荐有礼', url: '/pages/sub/invite/index' },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my8.png', text: '我的收藏', url: '/pages/sub/my/myCollect' },
  { icon: 'https://cdn.xmxiaomai.com/isong_static/my/my9.png', text: '礼品卡兑换', url: '/pages/sub/my/cardRecharge' },
  {
    icon: 'https://cdn.xmxiaomai.com/isong_static/my/my9.png',
    text: '首页广告购买',
    url: '/pages/sub/my/advertisement',
  },
]);

// 签到
const onClockIn = () => {
  if (!!data.signInInfo?.todaySignIn) {
    return;
  }
  fetchSignIn();
};

// 跳会员详情(改成直接跳充值页面)
const onToVip = () => {
  uni.navigateTo({
    url: `/pages/sub/my/rechargePage`,
  });
};

// 子页面跳转
const onToPage = (url: string) => {
  if (url === '/pages/evaluation/index') {
    uni.switchTab({
      url: url,
    });
  } else {
    uni.navigateTo({
      url: url,
    });
  }
};

// 联系客服
const handleContact = (e: any) => {
  console.log(e.detail.path);
  console.log(e.detail.query);
};

// 退出登录
const handleLogout = () => {
  fetchLogout();
};

/**
 * 接口相关
 */
// 获取用户信息
const fetchGetUserinfo = async () => {
  try {
    const res = await api.User.get();
    data.info = res.data;
  } catch (e) {}
};

// 退出登录
const fetchLogout = async () => {
  try {
    await api.Auth.logout();
    // 清空缓存信息
    uni.removeStorageSync('auth');
    // 跳转至登录页面
    uni.navigateTo({ url: '/pages/sub/login/index' });
  } catch (error) {}
};

// 签到
const fetchSignIn = async () => {
  try {
    await api.User.signIn();
    Toast('签到成功！');
    fetchGetSignInStatus();
  } catch (error) {}
};

// 获取签到状态
const fetchGetSignInStatus = async () => {
  try {
    const res = await api.User.getSignInStatus();
    data.signInInfo = res.data;
  } catch (error) {}
};

onShow(() => {
  // 使用统一的登录检查函数，避免重复跳转登录页
  if (!checkLoginAndNavigate()) {
    return;
  }
  fetchGetUserinfo();
  fetchGetSignInStatus();
});
</script>

<style lang="scss" scoped>
.userinfo {
  margin-top: -350rpx;
}
.mine-page {
  background: #f7f9f8;
  position: relative;
  padding-bottom: calc(48px + $safe-bottom + 80rpx);
}
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 320rpx;
  background: linear-gradient(135deg, #1b7c5e 60%, #2bbd7e 100%);
  border-bottom-left-radius: 60rpx;
  border-bottom-right-radius: 60rpx;
  z-index: 0;
}
.profile-section {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 60rpx 32rpx 0 32rpx;
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 4rpx solid #fff;
    background: #eee;
  }
  .profile-info {
    flex: 1;
    margin-left: 24rpx;
    .name {
      font-size: 36rpx;
      color: #fff;
      font-weight: bold;
    }
    .vip-badge {
      margin-top: 8rpx;
      display: inline-block;
      background: #ffe7b2;
      color: #a67c00;
      font-size: 22rpx;
      border-radius: 20rpx;
      padding: 4rpx 18rpx;
    }
  }
  .sign-btn {
    margin-right: 10rpx;
    text-align: center;
    background: transparent;
    color: #ffffff;
    border-radius: 30rpx;
    font-size: 28rpx;
    width: 112rpx;
    height: 44rpx;
    line-height: 42rpx;
    padding-bottom: 2rpx;
    border: 2rpx solid #ffffff;
    &.disabled {
      border: 2rpx solid #aaa;
      color: #aaa;
    }
  }
}
.vip-card {
  margin: 32rpx 35rpx 0 35rpx;
  background-image: url('https://cdn.xmxiaomai.com/isong_static/my/vip_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 24rpx;
  padding: 37rpx 53rpx;
  color: #fff;
  width: 574rpx;
  height: 116rpx;
  position: relative;
  .vip-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #e0cfa7;
    padding-top: 14rpx;
  }
  .vip-desc {
    font-size: 22rpx;
    margin-top: 8rpx;
  }
  .recharge-btn {
    position: absolute;
    right: 43rpx;
    top: 72rpx;
    background-image: url('https://cdn.xmxiaomai.com/isong_static/my/btn_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #452b05;
    border-radius: 20rpx;
    font-size: 24rpx;
    width: 159rpx;
    height: 44rpx;
    line-height: 44rpx;
    border: none;
    background-color: transparent;
    padding-right: 35rpx;
  }
}
.menu-list {
  margin: 32rpx 24rpx 0 24rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  .menu-item {
    display: flex;
    align-items: center;
    padding: 32rpx 0 32rpx 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;
    .menu-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 24rpx;
    }
    .menu-text {
      font-size: 28rpx;
      color: #333;
      flex: 1;
    }
    .menu-extra {
      color: #1b7c5e;
      font-size: 24rpx;
      border: 1rpx solid #1b7c5e;
      border-radius: 16rpx;
      padding: 2rpx 18rpx;
      margin-right: 16rpx;
    }
    uni-icons {
      margin-right: 32rpx;
    }
    &.emphasize {
      font-weight: bold;
      color: #1b7c5e;

      .menu-text {
        color: #2196F3;
      }
    }
  }
  .menu-item:last-child {
    border-bottom: none;
  }
}
.logout-btn {
  margin: 48rpx 32rpx 0 32rpx;
  width: 670rpx;
  height: 88rpx;
  line-height: 88rpx;
  color: #1b7c5e;
  border-radius: 49rpx;
  font-size: 30rpx;
  border: 2rpx solid #1b7c5e;
  text-align: center;
}
.sign-section {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  position: relative;
  top: 16rpx;
  align-items: center;
  .sign-hint{
    font-size: 24rpx;
    color: #009688;
  }
}

</style>
